<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-order-refer">
      <!--地址为空-->
      <div class="ga-arrow-cell" @click="actionSheet=true">
        <div class="item">
          <div class="con">
            <i class="gaIcon pos"></i>
            <span>{{addresstext}}</span>
          </div>
          <i class="icon-angle-right"></i>
        </div>
      </div>
      <!--地址不为空-->
      <div class="address"  v-for="(item,index) in address" :key="index" v-if="item.id === addr_id">
        <div>
          <p>收货地址：</p>
          <p class="p1">
            <span class="mr10">{{item.name}}</span>
            <span class="mr10">{{item.mobile}}</span>
          </p>
          <p class="p2">{{item.address_tostring}}</p>
        </div>
      </div>

      <!--商品列表-->
      <ul class="ga-group-list ga-media-list">
        <li v-for="(item,index) in data" :key="index">
          <a class="item" href="#">
            <div class="item-media">
              <div class="img-box">
                <img :src="item.goods.goods_thumb" alt="">
              </div>
            </div>
            <div class="item-inner">
              <p class="title">{{item.goods.goods_name}}</p>
              <p class="p1"></p>
              <div class="con">
                <!-- <span>{{item.goods_attr || ''}}</span> -->
                <div>
                  <span>x{{item.num}}</span>
                  <span class="price">¥{{item.goods.goods_price}}</span>
                </div>
              </div>
            </div>
          </a>
        </li>
      </ul>

      <!--配送费-->
      <ul class="ga-arrow-cell mt20">
        <li class="item">
          <span>配送费</span>
          <span>¥0.00</span>
        </li>
      </ul>

      <!--结算-->
      <div class="ga-bottom-fixed">
        <div class="bottom">
          <div class="total">
            <span class="mr10">待支付</span>
            <span class="f36">¥{{total.goods_price}}</span>
          </div>
          <div class="btn primary" @click = "setorder">确认支付</div>
        </div>
      </div>
      <!-- 添加地址 弹层-->
      <div>
        <div class="ga-mask" :class="{hide:!actionSheet}" @click="actionSheet=false"></div><!-- ga-mask-->

        <div class="ga-action-sheet" :class="{active:actionSheet}">
          <h1>收货地址</h1>

          <div class="weui-cells">
            <radio-group @change="radioChange">
              <label class="weui-cell weui-check__label" v-for="(item,index) in address" :key="index">
                <radio class="weui-check" :value="item.id" :checked="addr_id === item.id?1:0" />
                <div class="weui-cell__bd">{{item.name}}</div>
                <div class="weui-cell__ft weui-cell__ft_in-radio" v-if="addr_id === item.id">
                  <icon class="weui-icon-radio" color="#ff8400" type="success_no_circle" size="16"></icon>
                </div>
              </label>
            </radio-group>
          </div>

          <div class="link-box">
            <a href="/pages/editAddress/main" class="link">新增地址</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {isLogin,handleError,showToast} from '@/utils/handleLogin'
    export default {
        data () {
            return {
                actionSheet:false,
                scrollTop: 100,
                addresstext: '添加地址',
                address: [],
                addr_id: 0,
                coupon_id: 0,
                data: [],
                total: [],
                coupon: []
            }
        },
        methods:{
            switchChange(e){
                console.log("switch发生change事件"+ e.mp.detail.value);
            },
            async load () {
                /*获取用户收货地址列表*/
                this.$_util.ajax.get('https://guo-a.com/mapi/address/addresslist?token=' + this.$store.state.Token).then((res) => {
                    if(res.code === 200){
                        this.address = res.data
                        if(res.data.length > 0){
                            this.addresstext = '选择地址'
                        }else{
                            this.addresstext = '添加地址'
                        }
                    }
                })
                /*获取购物车商品信息 以及可用的优惠券*/
                let params = {
                   data: decodeURIComponent(this.$root.$mp.query.data)
                }
                this.$_util.ajax.post('https://guo-a.com/mapi/nearby/confirms?token=' + this.$store.state.Token,params).then((res) => {
                    console.log(res)
                    if(res.code === 200){
                        this.data = res.data
                        this.total = res.total
                    }else{
                        wx.navigateBack()
                    }
                }).catch((err) => {
                    showToast(err)
                })
            },
            /*创建订单*/
            async setorder () {
                if(!this.addr_id){
                    showToast('请选择收货地址')
                    return false
                }
                let params = {
                    addr_id: this.addr_id,
                    data: decodeURIComponent(this.$root.$mp.query.data)
                }
                let that = this
                this.$_util.ajax.post('https://guo-a.com/mapi/nearby/makeOrder?token=' + this.$store.state.Token,params).then((res) => {
                  console.log(res)
                    // if(res.code === 200){
                    //     wx.navigateTo({
                    //         url: '/pages/pay/main?id=' + res.order_id
                    //     })
                    // }else{
                    //     showToast(res.msg)
                    // }
                  if(res.code === 200){
                    wx.requestPayment({
                      'timeStamp': res.data.timeStamp,
                      'nonceStr': res.data.nonceStr,
                      'package': res.data.package,
                      'signType': res.data.signType,
                      'paySign': res.data.paySign,
                      'success': function(dd){
                        if(dd.errMsg == "requestPayment:ok"){
                          // 调用支付成功
                               that.bindNavigateTo('/pages/storeorderlist/main')
                        }else if(dd.errMsg == 'requestPayment:cancel'){
                          // 用户取消支付
                        }

                      },
                      'fail': function(dd){
                        wx.navigateBack()
                        return false
                      },
                      'complete': function(dd){

                      }
                    })
                  }
                })
            },
            /**
             * 路由跳转
             */
            bindNavigateTo (url) {
                wx.navigateTo({
                    url
                })
            },
            bindSwitchTab (url) {
                wx.switchTab({
                    url
                })
            },
            radioChange (e) {
                this.addr_id = e.target.value
            }
        },
        onShow () {
            isLogin(()=>{
              console.log(this.$root.$mp.query)
              this.load()
            })
        },
        mounted () {

        }

    }
</script>
